<template>
<div class="">
    <div class="box">
        <div class="top">

                <table>
                    <thead>
                        <tr>
                            <td>
                                <input type="checkbox" v-model="qq" @change="qx">
                            </td>
                            <td>商品图片</td>
                            <td>商品名称</td>
                            <td>单价</td>
                            <td>数量</td>
                            <td>小计</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in zxc" :key="index">
                            <td>
                                <input type="checkbox" @change="fx" v-model="item.check" >
                            </td>
                            <td>
                                <img :src="'http://101.132.181.9:3000/'+item.productImg" alt="">
                            </td>
                            <td>{{item.productName}}</td>
                            <td>{{item.price}}元</td>
                            <td>
                                <button @click="jian(item)">-</button>
                                <button>{{item.num}}</button>
                                <button @click="jia(item)">+</button>
                            </td>
                            <td style="color:red">{{item.price*item.num}}元</td>
                            <td @click="sc(item.productID)">X</td>
                        </tr>
                    </tbody>
                </table>
                
        </div>
       <footer>
            <div >
                <button class="a1">加入购物车</button>
            </div>
            <div class="a2">
                <p>
                   共 <span>{{zjs}}</span>件商品，已选择<span>{{fd}}</span>
                </p>
            </div>
            <div class="a3">
                <span>合计：<span>{{heji}}元</span></span>
                <button @click="chuan">去结算</button>
             </div>
        </footer> 
        
    </div>
</div>   
</template>
<script>
import { gouwuche ,xiu,shan} from "@/api/api.js";

export default {
  data() {
    return {
      zxc: [],
      qq:false,
      num:0,
      arr:[],//订单
      
      //选中的数据
      checkList: [],

      //未选中的数据
      noCheckList: []
    };
  },
  created() {
  this.xuan()
  this.sc()
  },
  methods: {
    qx(){//全选
        this.zxc.forEach(item=>{
            item.check=this.qq
        })
        this.dd()
    },
    fx(){//反选
        this.qq=this.zxc.every(item=>item.check)
       this.dd()
    },
    xuan(){
      let user = JSON.parse(localStorage.getItem("user"));
    gouwuche({ user_id: user.user_id }).then(res => {
      this.zxc = res.data.shoppingCartData;
      console.log(this.zxc);
    });
},


    //方法
    jian(e){ 
        if(e.num<=1){
            return e.num=1
        }else{
            e.num--
        }
         let user = JSON.parse(localStorage.getItem("user"));
        xiu({user_id:user.user_id,product_id:e.productID,num:e.num}).then(res=>{
     if(res.status==200){
         this.$message({
          message: res.data.msg,
          type: 'success'
        });
        }
        })

    },
    //加
    jia(e){
        console.log(e);
        if(e.num>=5){
            return e.num=5
        }else{
            e.num++
        }
         let user = JSON.parse(localStorage.getItem("user"));
         console.log(user.user_id);
        xiu({user_id:user.user_id,product_id:e.productID,num:e.num}).then(res=>{
     if(res.status==200){
         this.$message({
          message: res.data.msg,
          type: 'success'
        });
        }
        })

    },
    //删除
    sc(i){
         let user = JSON.parse(localStorage.getItem("user"));
        shan({user_id:user.user_id,product_id:i}).then(res=>{
           this.xuan()
             if(res.status==200){
         this.$message({
          message: res.data.msg,
          type: 'success'
        });
             }
        })
    },
    // chuan(){//传订单
    //     this.$router.push({name:'order',params:{arr:this.arr}})
    // },
    // //加入订单判断item.check 为true ，放进arr数组 然后路由跳转携带arr跳转
    dd(){//订单
    this.arr=this.zxc.filter(item=>{
        return item.check
    })
    },

      chuan() {
      this.checkList = this.zxc.filter(item => item.check);
      this.noCheckList = this.zxc.filter(item => !item.check);
      this.$router.push({
        path: "order",
        query: { arr: JSON.stringify(this.checkList) }
      });
    },



  },
  computed:{
      zjs(){//总件数
          let num=0
          this.zxc.forEach(item=>{
              num+=item.num
          })
          return num
      },
   fd(){//已选择件数
          let num=0
          this.zxc.forEach(item=>{
              if(item.check){
                  num+=item.num
              }
              
          })
          return num
      },


      heji(){//合计
          let zshu=0
           this.zxc.forEach(item=>{
               if(item.check==true){
                   zshu+=item.num*item.price
               }
          })
          return zshu
      }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
//   height: 800px;

//   background-color: pink;
}
.top {
  display: flex;
//   width: 1070px;
//   background-color: #ccc;
//   height: 800px;
  margin: 0 auto;
}
table {
  float: left;
  width: 1070px;
  height: 70px;
  // margin: 20px 5%;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  // margin-top: 30px;
  line-height: 70px;
  padding-top: 30px;
  background-color: #fff;
  thead {
    tr {
      // text-align: center;
      // margin-top: 20px;
      height: 40px;
      border-bottom: 1px solid #000;
    }
  }
}
tbody {
  tr {
    height: 80px;
    td {
      border-top: 1px solid #000;
      text-align: center;
      font-size: 14px;
      button {
        width: 30px;
        height: 30px;
        color: white;
        margin: 0 3px;
      }
      img {
        width: 70px;
        height: 70px;
        vertical-align: middle;
      }
    }
  }
}
footer{
    width: 1070px;
    height: 50px;
    // background-color: blue;
    position: relative;
    bottom: 0;
    margin: 0 auto;
    display: flex;
    text-align: center;
    line-height: 50px;
    .a1{
        width: 200px;
        height: 50px;
    }
    .a2{
        width: 200px;
        height: 50px;
        p{
            font-size: 20px;
            span{
                color: orange;
                font-size: 20px;
            }
        }
    }
    .a3{
        position: absolute;
        right: 0;
        width: 200px;
        height: 50px;
         span{
                color: orange;
                font-size: 20px;
            }
    }
}
</style>